<template>
    <div class="design-item">
        <div class="design-item-controller">
            <div class="design-item-controller-handle">
                <div class="design-component-discount-preview ">
                    <div :class="computedWrapClass">
                        <!-- 主体-->
                        <a href="javascript:;" class="cap-ump-limitdiscount-goods" v-for="(item , index ) in computedGoodsList">
                            <div class="cap-ump-limitdiscount-goods__header">
                                <div class="cap-ump-limitdiscount-goods__img-wrap" :style="getImgWrapStyle(item)">
                                    <div class="cap-ump-limitdiscount-goods__img--cover" v-if="0 == fillType" :style="getImgStyle(item)"></div>
                                    <img class="cap-ump-limitdiscount-goods__img" v-if="1 == fillType" :src="item.goodsImageUrl">
                                </div>
                                <div class="cap-ump-limitdiscount-goods__tag-info">
                                    <span class="cap-ump-limitdiscount-goods__tag" v-if="0 == size ">限时折扣</span>
                                    <div class="cap-ump-limitdiscount-goods__tag-countdown" v-if="1 == showCountDown">
                                        <span class="cap-ump-limitdiscount-goods__countdown-text" v-if="0 == size ">距结束还剩：</span>
                                        <div class="cap-ump-limitdiscount-goods__countdown cap-countdown cap-countdown--white">
                                            <span class="cap-countdown__hour">00</span><span class="cap-countdown__time-text">时</span><span class="cap-countdown__minute">00</span><span class="cap-countdown__time-text">分</span><span class="cap-countdown__second">00</span><span class="cap-countdown__time-text">秒</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="cap-ump-limitdiscount-goods__content">
                                <h3 class="cap-ump-limitdiscount-goods__title" v-if="0 != size || 1 == showGoodsName">
                                    <span class="cap-ump-limitdiscount-goods__discount" v-if="item.focus == 'discount'">{{item.discount}}折</span>
                                    <span class="cap-ump-limitdiscount-goods__discount" v-if="item.focus == 'reduce'">减{{item.reduce}}元</span>
                                    {{item.goodsName}}
                                </h3>

                                <div class="cap-ump-limitdiscount-goods__detail">
                                    <div class="cap-ump-limitdiscount-goods__price">
                                        <span v-nc-price="item.discountPrice"></span>
                                    </div>
                                    <div class="cap-ump-limitdiscount-goods__origin-price">
                                        <span class="cap-ump-limitdiscount-goods__origin-price-symbol">¥</span>{{item.goodsPrice | $convertPriceInteger}}.{{item.goodsPrice | $convertPriceDecimal}}
                                    </div>
                                </div>

                                <div class="cap-ump-limitdiscount-goods__bottom">
                                    <div class="cap-ump-limitdiscount-goods__rest" v-if="1 == size && showGoodsStorage">
                                        仅剩 <span class="cap-ump-limitdiscount-goods__rest-num">{{item.goodsStorage}}</span>
                                        件
                                    </div>
                                    <div class="cap-ump-limitdiscount-goods__action" v-if="showBuyBtn">立即抢购</div>
                                </div>
                            </div>
                        </a>

                        <!-- end 主体 -->
                    </div>
                </div>
            </div>
            <slot name="menu"></slot>
        </div>
        <div class="design-item-editor" v-show="show && !showAddMenuGroup">
            <div>
                <div class="design-item-editor-title">限时折扣</div>

                <div class="editor-group">
                    <div class="editor-group-label ">选择活动：</div>
                    <div class="editor-group-control" v-if="discount" @click="bindSelectDiscount">
                        <span class="rc-design-component-limit-discount-editor__activity-name">{{discount.discountName}}</span>
                        <span class="rc-design-component-limit-discount-editor__edit-activity-name">修改</span>
                    </div>
                    <div class="editor-group-control" v-else @click="bindSelectDiscount">
                        <span class="rc-design-component-limit-discount-editor__edit-activity-name">添加限时折扣活动</span>
                    </div>
                </div>
                <div class="design-editor-control-group-error" style="margin: -15px 0 10px 90px;" v-if="showError1">
                    请添加限时折扣活动
                </div>

                <div class="editor-group no-mb" v-if="discount">
                    <div class="editor-group-label editor-group-label-top">商品：</div>
                    <div class="editor-group-control">

                        <div class="design-editor-card-item-inline" draggable="true" style="opacity: 1;" v-for="(item, index ) in discountGoodsList">
                            <div class="design-component-goods-item">
                                <a :href="ncGlobal.wapRoot + 'goods/detail.html?commonId=' + item.commonId " class="image-url" target="_blank">
                                    <img :src="item.goodsImageUrl" class="design-component-goods-item-img" alt="商品图">
                                </a>
                            </div>
                            <i class="design-editor-card-item-delete fa fa-close" @click="bindDelDiscountGoods(index)"></i>
                        </div>
                        <div class="design-editor-card-add-inline" @click.stop="bindSelectDiscountGoods">
                            <span><i class="fa fa-plus design-editor-card-add-icon"></i></span>
                        </div>
                    </div>
                </div>
                <div class="design-editor-control-group-error" style="margin: -5px 0 10px 70px;" v-if="showError2">
                    请选择商品
                </div>

                <div class="editor-group">
                    <div class="editor-group-label ">列表样式：</div>
                    <div class="editor-group-control">
                        <label :class="['nc-radio-wrap', 0 ==size ?'nc-radio-checked':'']" @click="bindChangeSize(0)"><span class="nc-radio"><span class="nc-radio-inner"></span></span><span>大图</span></label>
                        <label :class="['nc-radio-wrap', 1 ==size ?'nc-radio-checked':'']" @click="bindChangeSize(1)"><span class="nc-radio"><span class="nc-radio-inner"></span></span><span>小图</span></label>
                        <label :class="['nc-radio-wrap', 2 ==size ?'nc-radio-checked':'']" @click="bindChangeSize(2)"><span class="nc-radio"><span class="nc-radio-inner"></span></span><span>详细列表</span></label>
                    </div>
                </div>

                <div class="controls-card">

                    <div class="editor-group">
                        <div class="editor-group-label ">填充方式：</div>
                        <div class="editor-group-control">
                            <label :class="['nc-radio-wrap', 0 ==fillType ?'nc-radio-checked':'']" @click="fillType = 0"><span class="nc-radio"><span class="nc-radio-inner"></span></span><span>填充</span></label>
                            <label :class="['nc-radio-wrap', 1 ==fillType ?'nc-radio-checked':'']" @click="fillType = 1"><span class="nc-radio"><span class="nc-radio-inner"></span></span><span>留白</span></label>
                        </div>
                    </div>

                    <div class="editor-group" v-if="0 == size">
                        <div class="editor-group-label ">显示比例：</div>
                        <div class="editor-group-control">
                            <label :class="['nc-radio-wrap', 0 ==ratio ?'nc-radio-checked':'']" @click="ratio = 0"><span class="nc-radio"><span class="nc-radio-inner"></span></span><span>3:2</span></label>
                            <label :class="['nc-radio-wrap', 1 ==ratio ?'nc-radio-checked':'']" @click="ratio = 1"><span class="nc-radio"><span class="nc-radio-inner"></span></span><span>1:1</span></label>
                        </div>
                    </div>


                    <div class="editor-group">
                        <div class="editor-group-label editor-group-label-top">显示内容：</div>
                        <div class="editor-group-control">
                            <div v-if="0 != size ">
                                <div class="editor-group">
                                    <div class="editor-group-control">
                                        <label :class="['nc-checkbox-wrap' , 1 == showCountDown ? 'nc-checkbox-checked' :'']" @click="showCountDown = showCountDown ?0 : 1"><span class="nc-checkbox"><span class="nc-checkbox-inner"></span></span><span>抢购倒计时</span></label>
                                    </div>
                                </div>
                            </div>
                            <div v-if="1 == size ">
                                <div class="editor-group">
                                    <div class="editor-group-control">
                                        <label :class="['nc-checkbox-wrap' , 1 == showGoodsStorage ? 'nc-checkbox-checked' :'']" @click="showGoodsStorage = showGoodsStorage ?0 : 1"><span class="nc-checkbox"><span class="nc-checkbox-inner"></span></span><span>显示库存</span></label>
                                    </div>
                                </div>
                            </div>
                            <div v-if="0 == size ">
                                <div class="editor-group">
                                    <div class="editor-group-control">
                                        <label :class="['nc-checkbox-wrap' , 1 == showGoodsName ? 'nc-checkbox-checked' :'']" @click="showGoodsName = showGoodsName ?0 : 1"><span class="nc-checkbox"><span class="nc-checkbox-inner"></span></span><span>商品名称</span></label>
                                    </div>
                                </div>
                            </div>


                            <div>
                                <div class="editor-group">
                                    <div class="editor-group-control">
                                        <label :class="['nc-checkbox-wrap', 1== showBuyBtn ? 'nc-checkbox-checked':'']" @click="showBuyBtn = showBuyBtn ?0 : 1"><span class="nc-checkbox"><span class="nc-checkbox-inner"></span></span><span>购买按钮</span></label>
                                    </div>
                                </div>
                                <div class="editor-group adjust" v-if="1 == showBuyBtn">
                                    <div class="editor-group-control">
                                        <div class="radio-group">
                                            <label :class="['nc-radio-wrap' ,0 ==  buyBtnType ? 'nc-radio-checked' : '' ] " @click="buyBtnType = 0 "><span class="nc-radio"><span class="nc-radio-inner"></span></span><span>样式1</span></label>
                                            <label :class="['nc-radio-wrap' ,1 ==  buyBtnType ? 'nc-radio-checked' : '' ] " @click="buyBtnType = 1 "><span class="nc-radio"><span class="nc-radio-inner"></span></span><span>样式2</span></label>
                                            <label :class="['nc-radio-wrap' ,2 ==  buyBtnType ? 'nc-radio-checked' : '' ] " @click="buyBtnType = 2 "><span class="nc-radio"><span class="nc-radio-inner"></span></span><span>样式3</span></label>
                                            <label :class="['nc-radio-wrap' ,3 ==  buyBtnType ? 'nc-radio-checked' : '' ] " @click="buyBtnType = 3 "><span class="nc-radio"><span class="nc-radio-inner"></span></span><span>样式4</span></label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>

            </div>
        </div>
        <slot name="addMenuGroup" v-if="showAddMenuGroup"></slot>
    </div>
</template>
<script>
    var emptyList = [0, 1, 2, 3].map(function (index) {
        return {
            commonId: index,
            goodsId: index,
            goodsName: '此处显示商品名称',
            goodsImage: '',
            goodsStorage: 10,
            goodsPrice: 79.99,
            discountPrice: 59.99,
            discount: 7,
            reduce: 20,
            goodsImageUrl: 'http://file.quanclubs.com/image/1c/45/1c45b9e3536f55ded545579658f00fd0.jpg'
        }
    })

    var defaultDataFormat = {
        // 折扣信息
        discount: null,
        // 限时折扣 名称
        // 商品列表
        discountGoodsList: [],
        // 列表样式
        size: 0,
        // 填充方式
        fillType: 0,
        // 比例
        ratio: 0,
        // 显示倒计时
        showCountDown: 1,
        // 显示购买按钮
        showBuyBtn: 1,
        // 显示商品名称
        showGoodsName: 1,
        //显示库存
        showGoodsStorage: 0,
        // 购买按钮样式
        buyBtnType: 0,

        type: 'discount'
    }
    export default {
        name: "nc-design-item-discount",
        otherInfo: {
            title: '限时折扣',
            type: 'discount',
            group: 1,
            max: 0
        },
        //外部传入参数
        props: {
            show: {
                type: Boolean,
                default: false
            },
            options: {
                type: Object,
                default: null
            },
            cid: {
                type: Number
            },
            showAddMenuGroup: {
                type: Boolean,
                default: false
            }
        },
        /*
         * 自身数据,一定要一个function
         */
        data() {

            let data = {}, key, customData = {
                ncGlobal: ncGlobal,
                showError1: false,
                showError2: false
            }

            if (!Nc.isEmpty(this.options)) {
                for (key in this.options) {
                    data[key] = this.options[key]
                }
            } else {
                data = $.extend(true, {}, defaultDataFormat)
            }

            return $.extend({}, data, customData)
        },
        computed: {
            /**
             * 外层样式
             */
            computedWrapClass(){
                let result = []

                if (0 == this.size) {
                    result.push('cap-ump-limitdiscount cap-ump-limitdiscount--big cap-ump-limitdiscount--preview')
                    result.push('cap-ump-limitdiscount--btn-' + this.buyBtnType)
                } else if (1 == this.size) {
                    result.push('cap-ump-limitdiscount cap-ump-limitdiscount--small cap-ump-limitdiscount--preview')
                    result.push('cap-ump-limitdiscount--btn-' + this.buyBtnType)
                } else if (2 == this.size) {
                    result.push('cap-ump-limitdiscount cap-ump-limitdiscount--list cap-ump-limitdiscount--preview')
                    result.push('cap-ump-limitdiscount--btn-' + this.buyBtnType)
                }
                return result
            },
            /**
             * 显示用的商品列表
             */
            computedGoodsList (){
                return this.discountGoodsList.length ? this.discountGoodsList : (0 == this.size ? [emptyList[0]] : emptyList )
            }
        },
        methods: {
            /**
             * 获取当前数据
             */
            getCurrentData () {

                if (null == this.discount) {
                    this.showError1 = true
                    return null
                }
                if (!this.discountGoodsList.length) {
                    this.showError2 = true
                    return null
                }

                var result = {}, key

                for (key in defaultDataFormat) {
                    result[key] = this[key]
                }

                return result
            },

            /**
             *
             */
            getImgStyle (item){
                switch (this.size) {
                    case 0 : {
                        return {
                            backgroundImage: 'url(' + item.goodsImageUrl + ')',
                            paddingTop: 0 == this.ratio ? '66.6667%' : '100%',
                            marginTop: 0 == this.ratio ? '-66.6667%' : '-100%'
                        }
                    }
                    case 1 :
                    case 2 : {
                        return {
                            backgroundImage: 'url(' + item.goodsImageUrl + ')',
                            paddingTop: '100%',
                            marginTop: '-100%'
                        }
                    }

                }
            },
            getImgWrapStyle (item){
                switch (this.size) {
                    case 0 : {
                        return {
                            paddingTop: 0 == this.ratio ? '66.6667%' : '100%'
                        }
                    }
                    case 1 :
                    case 2: {
                        return {
                            paddingTop: '100%'
                        }
                    }
                }
            },
            /**
             * 选择显示折扣活动
             */
            bindSelectDiscount(){
                var self = this,
                    selectArray = this.discount ? [this.discount] : []

                Nc.openDiscount({
                    selectedArray: selectArray
                }, function (currentArray) {
                    let discount = currentArray[0]
                    self.discount = discount
                    self.showError1 = false
                    self.discountGoodsList = []
                })
            },
            /**
             * 选择限时折扣商品
             */
            bindSelectDiscountGoods(){
                var self = this
                Nc.openDiscountGoods({
                    discountId: this.discount.discountId,
                    selectedArray: this.discountGoodsList,
                    max: 0
                }, function (currentArray) {
                    self.discountGoodsList = currentArray
                    self.showError2 = false
                })
            },
            /**
             * 删除选中的商品
             * @param index
             */
            bindDelDiscountGoods(index){
                this.discountGoodsList.splice(index, 1)
            },
            /**
             * 改变尺寸
             * @param currentValue
             */
            bindChangeSize (currentValue){
                this.size = currentValue

                switch (currentValue) {
                    case 0 : {
                        this.showCountDown = 1
                        break;
                    }
                    case  1 :
                    case 2: {
                        this.showGoodsName = 1
                        break
                    }
                }
            }
        }
    };
</script>